<%--
  Created by IntelliJ IDEA.
  User: gacl
  Date: 2017/10/19
  Time: 17:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
  <title>基于Servlet3.0+jquery-form.js实现的AJAX文件上传</title>
</head>

<body>
<fieldset>
  <legend>
    AJAX——上传单个文件
  </legend>
  <!-- 文件上传时必须要设置表单的enctype="multipart/form-data"-->
  <form id="dataForm1" enctype="multipart/form-data">
    文件上传方式：
    <select name="uploadType">
      <option value="SFTP">SFTP</option>
      <option value="FASTDFS">FASTDFS</option>
      <option value="QINIU">QINIU</option>
    </select>
    <br/>
    上传文件：
    <input type="file" name="file">
    <br>
    <input type="button" id="btnUpload1" value="上传">
  </form>
  <div id="displayImg1">

  </div>
</fieldset>
<hr />
<fieldset>
  <legend>
    AJAX——上传多个文件
  </legend>
  <!-- 文件上传时必须要设置表单的enctype="multipart/form-data"-->
  <form id="dataForm2" enctype="multipart/form-data">
    文件上传方式：
    <select name="uploadType">
      <option value="SFTP">SFTP</option>
      <option value="FASTDFS">FASTDFS</option>
      <option value="QINIU">QINIU</option>
    </select>
    <br/>
    上传文件(单选)：
    <input type="file" name="file1">
    <br>
    上传文件(单选)：
    <input type="file" name="file2">
    <br>
    上传文件(可以同时选多个文件)：
    <input type="file" multiple="multiple" name="file3">
    <br>
    <input type="button" id="btnUpload2" value="上传">
  </form>
  <div id="displayImg2">

  </div>
</fieldset>
</body>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-form.js"></script>
<script type="text/javascript">
  $(function($){
      var dataForm1 = $("#dataForm1");
      var dataForm2 = $("#dataForm2");
      $("#btnUpload1").on("click", function () {
        ajaxUploadFile(dataForm1,"${pageContext.request.contextPath}/uploadServlet",function(data){
          for(var i=0;i<data.length;i++){
            var img = $("<img src='"+data[i].fileUrl+"'/><hr/>");
            $("#displayImg1").append(img); //将动态创建的img元素追加到displayImg1下面
          }
        });
      });

    $("#btnUpload2").on("click", function () {
        ajaxUploadFile(dataForm2,"${pageContext.request.contextPath}/uploadServlet",function(data){
            for(var i=0;i<data.length;i++){
              var img = $("<img src='"+data[i].fileUrl+"'/><hr/>");
              $("#displayImg2").append(img); //将动态创建的img元素追加到displayImg1下面
            }
        });
    });

    function ajaxUploadFile(dataForm,url,callbackFn){
      //ajax提交form file得用jquery-form.js 的 ajaxSubmit方式;注意需要引入jquery-form.js
      dataForm.ajaxSubmit({
        type:"post",
        dataType: "json",//设置服务端的数据以json的格式返回
        url:url,
        success:function(result){
          if(result.code == 0){
              console.log(JSON.stringify(result.data));
              if(callbackFn != undefined && typeof callbackFn =="function"){
                callbackFn(result.data);
              }
          }else{
            return false;
          }
        }
      });
    }
  });
</script>

</html>